<template>
  <section class="mainbox">
    <!-- <section id="bg"/> -->
    <div class="column">
      <div class="panel"><dv-border-box-10><humidity/></dv-border-box-10></div>
      <div class="panel"><dv-border-box-10><liquid/></dv-border-box-10></div>
    </div>
    <div class="column">
      <div class="datapanel"><dv-border-box-10 ><datas/></dv-border-box-10></div>
      <div class="mountain"><mountain/></div>
    </div>
    <div class="column">
       <div class="panel"><dv-border-box-10><temperature/></dv-border-box-10></div>
      <div class="panel"><dv-border-box-10><injectiondata/></dv-border-box-10></div>
    </div>
  </section>
</template>

<script>
import mountain from '@/components/index/mountain.vue'
import bus from '../utils/bus.js'
import humidity from '@/components/index/humidity.vue'
import temperature from '@/components/index/temperature.vue'
import liquid from '@/components/index/liquid.vue'
import injectiondata from '@/components/index/injectiondata.vue'
import datas from '@/components/index/datas.vue'
export default {
  name: 'index',
  data () {
    return {
      iscollapse: false
    }
  },
  created () {

  },
  components: {
     mountain,
     humidity,
     temperature,
     liquid,
     injectiondata,
     datas
  }
}
</script>

<style scoped lang='scss'>

.mainbox {
  display: flex;
  margin: 0 auto;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
  padding: 0.125rem 0.125rem 0;
  background: url("../assets/images/bg.jpg");
}

.column{
  flex: 3;
}
.column:nth-child(2){
  flex: 4;
  margin: 0.125rem 0.125rem 0;
}
.panel{
  height: 43vh;
  // background-color:pink;
  padding: 0 0.1875rem 0.2rem ;
  margin-bottom: 0.1875rem;
   margin: 0 auto;
}

.datapanel{
  height: 20vh;
  background-color: rgba(101, 132, 226, 0.1);
  padding: 0.1875rem;
}

.mountain{
  height: 65vh;
  background-color: pink;
  margin-top: 0.5rem;
  padding: 0.25rem;
}


</style>
